<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 新增区域 -->
        <el-row>
          <el-col :span="12">
            <span>说明：目前支持学科和关键字条件筛选</span>
          </el-col>
          <el-col :span="12">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="$router.push('/questions/new')"
              >新增试题</el-button
            >
          </el-col>
        </el-row>
        <!-- 筛选表单区域 -->
        <el-form :model="form" label-width="80px" style="margin-top: 20px"  size="small">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  style="width: 100%"
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @change="subjectLevelOneChanged"
                >
                  <el-option
                    :label="obj.label"
                    :value="obj.value"
                    v-for="obj in subjectsList"
                    :key="obj.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  style="width: 100%"
                  v-model="form.twoLevelDirectory"
                  placeholder="请选择"
                >
                  <el-option
                    :label="obj.label"
                    :value="obj.value"
                    v-for="obj in twoLevelDirectoryList"
                    :key="obj.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  style="width: 100%"
                  v-model="form.tags"
                  placeholder="请选择"
                >
                  <el-option
                    :label="obj.label"
                    :value="obj.value"
                    v-for="obj in tagsList"
                    :key="obj.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="请输入关键字"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  style="width: 100%"
                  v-model="form.questionType"
                  placeholder="请选择"
                >
                  <el-option label="单选" value="1">单选</el-option>
                  <el-option label="多选" value="2">多选</el-option>
                  <el-option label="简答" value="3">简答</el-option>
                </el-select>
              </el-form-item></el-col
            >
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  style="width: 100%"
                  v-model="form.difficulty"
                  placeholder="请选择"
                >
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  style="width: 100%"
                  v-model="form.direction"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item"
                    value="item"
                    v-for="(item, index) in directionList"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  style="width: 100%"
                  v-model="form.creatorID"
                  placeholder="请选择"
                >
                  <el-option
                    :label="obj.username"
                    :value="obj.id"
                    v-for="obj in userList"
                    :key="obj.id"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                 style="width:48%;margin-right:2%"
                  v-model="form.province"
                  placeholder="请选择"
                  @change="cityChanged"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in cityList"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="form.city"
                  placeholder="请选择"
                  style="width: 50%;"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in areaList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="serachSubmit"
                    >搜索</el-button
                  >
                  <el-button
                    size="small"
                    @click="resetForm"
                    style="margin-right:10px"
                    >清除</el-button
                  >
                </el-form-item>
              </el-form-item></el-col
            >
          </el-row>
        </el-form>
        <!-- tabs标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all">
            <QuestionsChoiceList
              :choiceList="questionChoiceList"
              :title="title"
              @deleteUpdate="deleteUpdate"
              @updateList="updateList"
            />
          </el-tab-pane>
          <el-tab-pane label="待审核" name="0">
            <QuestionsChoiceList
              :choiceList="questionChoiceList"
              :title="title"
              @deleteUpdate="deleteUpdate"
              @updateList="updateList"
            />
          </el-tab-pane>
          <el-tab-pane label="已审核" name="1">
            <QuestionsChoiceList
              :choiceList="questionChoiceList"
              :title="title"
              @deleteUpdate="deleteUpdate"
              @updateList="updateList"
            />
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="2">
            <QuestionsChoiceList
              :choiceList="questionChoiceList"
              :title="title"
              @deleteUpdate="deleteUpdate"
              @updateList="updateList"
            />
          </el-tab-pane>
        </el-tabs>
        <!-- 分页区域 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="query.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import QuestionsChoiceList from '../components/QuestionsChoiceList'
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleDirectory } from '@/api/hmmm/directorys'
import { list } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice } from '@/api/hmmm/questions'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { direction } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsChoice',
  data () {
    return {
      form: {
        subjectID: null, // 学科
        twoLevelDirectory: null, // 二级目录
        tags: null, // 标签
        creatorID: null, // 录入人
        difficulty: null, // 难度
        questionType: null, // 试题类型
        shortName: null, // 企业简称
        province: null, // 城市
        city: null, // 地区
        keyword: null, // 关键字
        remarks: null, // 题目备注
        direction: null // 方向
      },
      query: {
        page: 1,
        pagesize: 2, // 每页显示多少条
        chkState: null // 审核状态
      },
      title: '', // 数据总条数标题
      total: 0,
      activeName: 'all',
      // 学科列表
      subjectsList: {}, // 学科列表
      twoLevelDirectoryList: [], // 二级目录列表
      tagsList: [], // 标签列表
      userList: [], // 用户列表
      cityList: [], // 城市列表
      areaList: [], // 地区列表
      questionChoiceList: [], // 精选题库全部列表
      filterChoiceList: [], // 筛选后题库列表
      directionList: direction // 方向列表
    }
  },
  created () {
    // 获取学科列表
    this.getSubjectsSimpleList()
    // 获取用户列表
    this.getUserList()
    // 获取省份列表
    this.getProvincesList()
    // 获取精选题库列表
    this.getQuestionChoiceList()
  },
  components: {
    QuestionsChoiceList
  },
  methods: {
    // 获取所有精选题库列表
    async getQuestionChoiceList () {
      const res = await choice({
        ...this.query,
        ...this.form
      })
      // console.log(res.data)
      this.questionChoiceList = res.data.items
      this.total = res.data.counts
      this.title = `数据一共${res.data.counts}条`
    },

    // 城市发生改变时，获取城市详情，渲染地区下拉列表
    cityChanged (val) {
      this.form.city = ''
      // console.log(val)
      this.areaList = citys(val)
    },

    // 获取城市列表，渲染城市下拉列表
    getProvincesList () {
      this.cityList = provinces()
      // console.log(provinces())
    },

    // 获取用户列表,渲染录入人下拉列表
    async getUserList () {
      const res = await list({
        page: this.query.page,
        pagesize: this.query.pagesize,
        keyword: this.keyword
      })
      // console.log(res.data)
      this.userList = res.data.list
    },

    // 学科发生改变时，获取学科详情，渲染二级目录下拉列表
    async subjectLevelOneChanged (val) {
      // console.log(val)
      const res = await simpleDirectory({
        subjectID: val
      })
      // console.log(res)
      if (res.data.length !== 0) {
        this.twoLevelDirectoryList = res.data
      }
      // 获取标签列表
      const re = await simpleTags({
        subjectID: val
      })
      // console.log(re)
      if (re.data.length !== 0) {
        this.tagsList = re.data
      }
    },

    // 获取学科简单列表，渲染学科下拉列表
    async getSubjectsSimpleList () {
      const res = await simple()
      // console.log(res)
      this.subjectsList = res.data
    },

    // 点击搜索,获取筛选后精选题库列表
    async serachSubmit () {
      this.query.page = 1
      console.log(this.query.chkState)
      const res = await choice({
        ...this.query,
        ...this.form
      })
      console.log(res.data)
      this.questionChoiceList = res.data.items
      this.total = res.data.counts
      this.title = `数据一共${res.data.counts}条`
    },

    // 点击选择标签页
    handleClick (tab, event) {
      // console.log(tab.name)
      if (tab.name !== 'all') {
        // console.log(tab.name)
        this.query.chkState = Number(tab.name)
        this.getQuestionChoiceList()
      } else {
        this.query.chkState = null
        this.getQuestionChoiceList()
      }
    },

    // 每页数据条数发生改变
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getQuestionChoiceList()
    },

    // 当前页码发生改变时
    handleCurrentChange (val) {
      this.query.page = val
      this.getQuestionChoiceList()
    },

    // 重置表单
    resetForm () {
      this.form = {
        subjectName: '', // 学科
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        creatorID: '', // 录入人
        difficulty: '', // 难度
        questionType: '', // 试题类型
        shortName: '', // 企业简称
        city: '', // 城市
        area: '', // 地区
        keyword: '', // 关键字
        remarks: '', // 题目备注
        direction: '' // 方向
      }
      this.query.chkState = null
      this.activeName = 'all'
    },

    // 删除试题后更新渲染精选题库列表
    async deleteUpdate () {
      // 判断如果当前页面没有数据，则页码值--
      if (this.questionChoiceList.length === 1) {
        this.query.page--
      }
      // 如果当前页码值小于1，则页码值为1
      if (this.query.page <= 1) {
        this.query.page = 1
      }
      this.getQuestionChoiceList()
    },

    // 更新渲染
    updateList () {
      this.getQuestionChoiceList()
    }
  }
}
</script>

<style scoped>
.el-row span {
  font-size: 12px;
  color: pink;
}
.el-row .el-button {
  float: right;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
